<div class="flex flex-col w-full p-4 select-none">
    <!-- Header Section -->
    <div class="header flex flex-col h-16 p-2 border border-gray-300 rounded-lg mb-4">
        <div class="search flex items-center justify-center space-x-1">
            <input type="text" id="searchQuery" class="input input-bordered w-72" placeholder="搜索应用名"/>
            <button class="btn btn-primary" id="searchBtn">Q</button>
        </div>
    </div>

    <!-- List Section -->
    <div class="list-body flex flex-col flex-grow overflow-auto mb-4">
        <div class="table-handler flex items-center space-x-2 mb-2">
            <button class="btn btn-primary" id="addBtn">新增</button>
        </div>
        <table class="table table-zebra w-full border">
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAll" class="radio small"/></th>
                <th>应用名</th>
                <th>版本号</th>
                <th>更新地址</th>
                <th>更新日志</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="appList">
            <!-- App -->
            </tbody>
        </table>
    </div>

    <!-- Modal Dialog -->
    <div id="modal" class="fixed inset-0 bg-opacity-10 glass hidden">
        <div class="modal modal-open rounded-lg p-2 w-96 h-fit m-auto">
            <h3 id="modalTitle" class="text-lg font-semibold">新增应用</h3>
            <form id="appForm" class="space-y-1 mt-2">
                <div class="form-control">
                    <label for="name" class="label">应用名</label>
                    <input type="text" id="name" class="input input-bordered w-full" placeholder="请输入应用名"
                           required/>
                </div>
                <div class="form-control">
                    <label for="version" class="label">版本号</label>
                    <input type="text" id="version" class="input input-bordered w-full" placeholder="以Vx.x.x开始"
                           required/>
                </div>
                <div class="form-control">
                    <label for="updateUrl" class="label">更新地址</label>
                    <input type="text" id="updateUrl" class="input input-bordered w-full" placeholder="请输入更新地址"
                           required/>
                </div>
                <div class="form-control">
                    <label for="updateLog" class="label">更新日志</label>
                    <input type="text" id="updateLog" class="input input-bordered w-full" placeholder="请输入更新日志"
                           required/>
                </div>
            </form>
            <div class="modal-action flex justify-end">
                <button class="btn" id="cancelBtn">取消</button>
                <button class="btn btn-primary" id="submitBtn">确定</button>
            </div>
        </div>
    </div>
</div>